<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="ico/favicon.ico">
    <link rel="stylesheet" href="css/cart.min.css">
    <link rel="stylesheet" href="../common/css/header.min.css">
    <link rel="stylesheet" href="../common/css/footer.min.css">
    <link rel="stylesheet" href="../common/css/reset.min.css">
    <link rel="stylesheet" href="../common/css/common.min.css">
    <link rel="stylesheet" href="../common/font//iconfont.css">
    <title>Dickies官方网站-购物车</title>
</head>

<body>
    <div class="header"></div>
    <div class="con">
        <div class="car-list">
            <div class="car-list-title">购物车</div>
            <div class="car-list">
                <div class="car-item">
                    <div class="tar-header">
                        <div class="car-con">
                            <div class="t-check">
                                <div class="t-radio all-radio" id=""></div>
                                全选
                            </div>
                            <div class="t-goods">
                                已选择的商品
                            </div>
                            <div class="t-action">
                                操作
                            </div>
                            <div class="t-quantity">
                                数量
                            </div>
                            <div class="t-price">
                                价格
                            </div>
                            <div class="t-coupon">
                                优惠
                            </div>
                            <div class="t-total">
                                总计
                            </div>
                        </div>
                    </div>
                    <div class="tar-content">
                        <div class="tar-content-con">
                            <div class="t-body">
                                <div class="t-body-tr">
                                    <div class="t-check tr-check">
                                        <div class="t-radio tr-radio" id="">
                                        </div>
                                    </div>
                                    <div class="tr-goods">
                                        <div class="tr-goods-item">
                                            <div class="tr-goods-item-img">
                                                <img src="images/10022.jpg" alt="">
                                            </div>
                                            <div class="tr-goods-item-r">
                                                <div class="tr-goods-item-title">
                                                    Dickies情侣款LOGO印花连帽卫衣
                                                </div>
                                                <div class="tr-goods-item-specs">
                                                    <span class="tr-goods-item-specs-id">
                                                        DK007374CC21XXL000
                                                    </span>
                                                    <span class="tr-goods-item-specs-color">
                                                        黑色
                                                    </span>
                                                    <span class="tr-goods-item-specs-size">
                                                        XXL
                                                    </span>
                                                </div>
                                                <!-- <div class="tr-goods-item-promo">
                                                    [满减]9月满100减10
                                                </div> -->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tr-action">
                                        <button class="tr-sp-btn">
                                            <span class="tr-sp-text">收藏 |</span>
                                        </button>
                                        <button class="tr-sp-btn">
                                            <span class="tr-sp-text btn-del">移除</span>
                                        </button>
                                    </div>
                                    <div class="tr-quantity">
                                        <div class="tr-sum-input">
                                            <input autocomplete="off" class="tr-num-input-text" value="1">
                                            <span class="tr-num-input-up">+</span>
                                            <span class="tr-num-input-down">-</span>
                                        </div>
                                        <div class="tip-msg"></div>
                                    </div>
                                    <div class="tr-price">
                                        <span class="tr-price-t">￥</span>
                                        <span class="tr-price-text">
                                            399
                                        </span>
                                        <span class="tr-price-t">.00</span>
                                    </div>
                                    <div class="tr-coupon">
                                        <span class="tr-coupon-t">￥</span>
                                        <span class="tr-coupon-text">
                                            0
                                        </span>
                                        <span class="tr-coupon-t">.00</span>
                                    </div>
                                    <div class="tr-total">
                                        <span class="tr-price-t">￥</span>
                                        <span class="tr-total-text">
                                            399
                                        </span>
                                        <span class="tr-price-t">.00</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="gift">
                        <div class="gift-nav">

                            <h2>赠品显示</h2>
                        </div>
                        <div class="gift-con">
                            <ul class="gift-ul">
                                <li>
                                    <div class="gift-gift">赠品</div>
                                    <span class="dift-txt">专区买2件赠宠物服饰</span>
                                </li>
                                <li>
                                    <div class="gift-gift">赠品</div>
                                    <span class="dift-txt">实付满599送公仔环保袋</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="tar-foot">
                    <div class="tar-foot-con">
                        <div class="check-total">
                            <div class="total-r">
                                <div class="total-lable">
                                    商品金额
                                </div>
                                <div class="total-value">
                                    <span class="total-p">￥</span>
                                    <span class="total-p subtotal">0</span>
                                    <span class="total-p">.00</span>
                                </div>
                            </div>
                            <div class="total-r">
                                <div class="total-lable">
                                    优惠金额
                                </div>
                                <div class="total-value">
                                    <span class="total-p">￥</span>
                                    <span class="total-p reduce">0</span>
                                    <span class="total-p">.00</span>
                                </div>
                            </div>
                        </div>
                        <div class="total-r">
                            <div class="total-lable">
                                总金额
                            </div>
                            <div class="total-value">
                                <span class="total-p allpr">￥</span>
                                <span class="total-p allprice">0</span>
                                <span class="total-p allpr">.00</span>
                            </div>
                        </div>
                        <div class="g-btn">
                            <button class="sp-btn">
                                    <span class="btn-text">
                                    <a href="../list/list.html"><< 继续购物</a>
                                    </span>
                                </button>
                            <button class="btn-check">
                                    <span class="btn-check-text">
                                        立即结算
                                    </span>
                                </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sp-recommend">
            <div class="sp-recommend-tit">当季主推</div>
            <span class="to-l">
                    <img src="images/l.png" alt="">
                </span>
            <span class="to-r">
                    <img src="images/r.png" alt="">
                </span>
            <div class="sp-recommend-swp">
                <ul>
                    <li>
                        <img src="images/1.jpg" alt="">
                        <p>Dickies男式明线装饰工装长袖衬衫</p>
                        <p>￥399.00</p>
                    </li>
                    <li>
                        <img src="images/2.jpg" alt="">
                        <p>Dickies女式印花阔腿喇叭裤</p>
                        <p>￥599.00</p>
                    </li>
                    <li>
                        <img src="images/3.jpg" alt="">
                        <p>Dickies男式撞色压线连帽印花宽松薄外套</p>
                        <p>￥899.00</p>
                    </li>
                    <li>
                        <img src="images/4.jpg" alt="">
                        <p>Dickies女式印花阔腿喇叭裤</p>
                        <p>￥599.00</p>
                    </li>
                    <li>
                        <img src="images/5.jpg" alt="">
                        <p>Dickies男式撞色压线连帽印花宽松薄外套</p>
                        <p>￥899.00</p>
                    </li>
                    <li>
                        <img src="images/6.jpg" alt="">
                        <p>Dickies男式彩色LOGO印花短袖T恤</p>
                        <p>￥258.00</p>
                    </li>
                    <li>
                        <img src="images/7.jpg" alt="">
                        <p>Dickies男式休闲工装短裤</p>
                        <p>￥199.00</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    <div class="footer"></div>
</body>

</html>
<script src="../jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="js/cart.js"></script>
<script>
    $(".header").load("../common/html/header.html", function() {
        window.onscroll = function() {
            // console.log($(window).scrollTop())
            if ($(window).scrollTop() > 70) {
                $(".header-bar-menus-t").css({
                    height: 45,
                    marginTop: 0,
                    width: "100%",
                    backgroundColor: "#fff",
                    zIndex: 1000,
                    position: "fixed",
                    top: 0,
                })
                $(".header-bar-menus-t-con .logo img").css({
                    width: 70,
                })
                $(".header-bar-menus-t-con .logo").css({
                    position: "absolute",
                    left: 10,
                    top: 3,
                    zIndex: 2000,
                })
            }
            if ($(window).scrollTop() < 70) {
                $(".header-bar-menus-t").css({
                    height: 45,
                    marginTop: 30,
                    width: "100%",
                    backgroundColor: "#fff",
                    zIndex: 1000,
                    position: "",
                    top: "",
                })
                $(".header-bar-menus-t-con .logo img").css({
                    width: 170,
                })
                $(".header-bar-menus-t-con .logo").css({
                    position: "absolute",
                    left: 10,
                    top: -30,
                    zIndex: 2000,
                })
            }
        }
    })

    $(".footer").load("../common/html/footer.html", function() {
        $(".nav li").eq(2).click(function() {
            $(window).scrollTop(0);
        })
    })
</script>